<template lang="pug">
  .tab-1
    Table.hasTitle-table.beautiful-table(:columns="thead" :data="planList")
      //- .pr-24.pl-24(slot="header")
      //-   .pull-right
      //-     Button.mr-15(type="info" size="small" @click="addContact") 添加联系人
      template(slot-scope="{ row, index }" slot="brief")
        span {{row.brief}}
      template(slot-scope="{ row, index }" slot="content")
        Poptip(trigger="hover" title="方案内容")
          div(slot="content")
            .u-d-info(v-for="(item, index) in row.attachments" :key="index" @click="downLoadAttachment(item.id, item.name)") {{item.name}}
          Button(size="small") 查看
      template(slot-scope="{ row, index }" slot="action")
        Button.mr-10(type="text" size="small" @click="reviseBtn(row)") 修改
        //- Button(type="text" size="small") 删除
    Modal(v-model="reviseModal" title="客户方案")
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="130")
        FormItem.mb-5(label="所属需求：")
          //- Input(v-model="formValidate.brief" placeholder="请输入")
          div {{formValidate.brief}}
        FormItem.mb-5(label="方案名称：" prop="name")
          Input(v-model="formValidate.name" placeholder="请输入")
        FormItem.mb-5.ivu-form-item-required(label="方案内容：")
          div
            Upload(:before-upload="createHandleUpload" multiple ref="addUpload" :show-upload-list="true" action="" style="display:inline-block" :headers="headers")
              Button(type="info" icon="ios-cloud-upload-outline" style="width:200px") 点击上传
            span.ml-10(v-show="hasFile" style="color:#ed4014") 请选择方案附件
          template(v-for="(item, index) in formValidate.attachments")
            .my-tag.mr-20
              .my-tag-inner {{item.name}}
              .img-close.ivu-icon.ivu-icon-ios-close(@click="deleteAttachment(item.id ,index)")
          template(v-for="(item, index) in fileArr")
            .my-tag.mr-20
              .my-tag-inner {{item.name}}
              .img-close.ivu-icon.ivu-icon-ios-close(@click="deleteFile(index)")
        FormItem.mb-5(label="竞争优势：" prop="strengths")
          Input(v-model="formValidate.strengths" placeholder="请输入")
        FormItem.mb-5(label="决策人：" prop="policymaker")
          Input(v-model="formValidate.policymaker" placeholder="请输入")
        FormItem.mb-5(label="决策人影响人：" prop="policyEffector")
          Input(v-model="formValidate.policyEffector" placeholder="请输入")
        FormItem.mb-5(label="决策时间：" prop="decideTime")
          DatePicker(:value="formValidate.decideTime" type="date" placeholder="请选择" style="display: block" @on-change="decideTimeChange")
        FormItem.mb-5(label="采购流程：" prop="purchaseFlow")
          Input(v-model="formValidate.purchaseFlow" placeholder="请输入")
        FormItem.mb-5(label="客户反馈：")
          Input(v-model="formValidate.feedback" type="textarea" placeholder="请输入")
        FormItem.mb-5
          Button(icon="ios-cloud-download-outline" @click="") 客户方案模板下载
      template(slot="footer")
        Button(type="info" @click="handleSubmit('formValidate')") 提交
        Button(@click="reviseModal = false") 取消
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'
import Mixin from '../detailMixin.js'
import Cookies from 'js-cookie'

export default {
  props: {
    planList: Array
  },
  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      isCheck: true,
      reviseModal: false,
      thead: [
        {
          title: '新增时间',
          minWidth: 190,
          render: (h, params) => {
            let row = params.row
            let times = ''
            if (row.createTime) {
              times = row.createTime.slice(0, 19).replace(/T/g, ' ')
            }
            return h('span', times)
          }
        },
        {
          title: '需求编号',
          minWidth: 150,
          key: 'requirementCode'
        },
        {
          title: '客户需求',
          minWidth: 100,
          slot: 'brief'
        },
        {
          title: '方案名称',
          minWidth: 120,
          key: 'name'
        },
        {
          title: '方案内容',
          minWidth: 100,
          slot: 'content'
        },
        {
          title: '客户决策人',
          minWidth: 110,
          key: 'policymaker'
        },
        {
          title: '决策影响人',
          minWidth: 110,
          key: 'policyEffector'
        },
        {
          title: '决策时间',
          minWidth: 120,
          key: 'decideTime'
        },
        {
          title: '客户反馈',
          minWidth: 100,
          key: 'feedback'
        },
        {
          title: '记录销售',
          minWidth: 100,
          key: 'createrName'
        },
        {
          title: '操作',
          minWidth: 140,
          slot: 'action'
        }
      ],
      hasFile: false,
      fileArr: [],
      formValidate: {},
      ruleValidate: {
        name: [
          { required: true, message: '方案名称不能为空', trigger: 'blur' }
        ],
        strengths: [
          { required: true, message: '竞争优势不能为空', trigger: 'blur' }
        ],
        policymaker: [
          { required: true, message: '决策人不能为空', trigger: 'blur' }
        ],
        policyEffector: [
          { required: true, message: '决策影响人不能为空', trigger: 'blur' }
        ],
        purchaseFlow: [
          { required: true, message: '采购流程不能为空', trigger: 'blur' }
        ],
        purchaseFlow: [
          { required: true, message: '采购流程不能为空', trigger: 'blur' }
        ],
        decideTime: [
          { required: true, message: '决策时间不能为空', trigger: 'change' }
        ]
      }
    }
  },
  mixins: [Mixin],
  methods: {
    reviseBtn (obj) {
      this.formValidate = obj
      this.reviseModal = true
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.fileArr.length + this.formValidate.attachments.length > 0) {
            let formData = new FormData()
            formData.append('id', this.formValidate.id)
            formData.append('rowVersion', this.formValidate.rowVersion)
            formData.append('name', this.formValidate.name)
            formData.append('strengths', this.formValidate.strengths)
            formData.append('policymaker', this.formValidate.policymaker)
            formData.append('policyEffector', this.formValidate.policyEffector)
            formData.append('purchaseFlow', this.formValidate.purchaseFlow)
            formData.append('decideTime', this.formValidate.decideTime)
            formData.append('feedback', this.formValidate.feedback)

            formData.append('customerId', this.formValidate.customerId)
            formData.append('requirementId', this.formValidate.requirementId)
            this.fileArr.forEach(item => {
              formData.append('atta', item)
            })

            HRDCCustomerApi.PostPlan(formData).then((res) => {
              if (res.data.success) {
                this.$Message.success(res.data.message)
                this.reviseModal = false
                this.$emit('get-list')
                this.fileArr = []
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 10,
                  closable: true
                })
              }
            })
          } else {
            this.hasFile = true
            console.log('@@@@@@@@@@@@@')
          }
        } else {
          this.$Message.warning('有必填项未填!')
        }
      })
    },
    deleteFile (index) {
      this.fileArr.splice(index, 1)
    },
    // 删除附件
    deleteAttachment (id, index) {
      HRDCCustomerApi.DeleteAttachment({
        id: id
      }).then(res => {
        this.formValidate.attachments.splice(index, 1)
        console.log(res)
      })
    },
    // 上传方案附件
    createHandleUpload (file) {
      this.fileArr.push(file)
      this.hasFile = false
      // console.log(this.fileArr)
      return false
    },
    decideTimeChange (val) {
      console.log(val)
      this.formValidate.decideTime = val
    }
  }
}
</script>

<style>

</style>
